{% extends "AdminBundle::layout.html.twig" %}
{% block css %}
{{parent()}}
<link rel="stylesheet" href="/css/inputosaurus.css" />

{% endblock %}
{% block body %}

<div class="row">
    <div class="col-md-12">
        <form id="form-theme" class="form-horizontal form-bordered"  method="post" action="{{path('admin_theme_new')}}">
            <div class="block">
                <div class="title">
                    <h2><strong>Nouveau Theme</strong></h2>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label">Libelle</label>
                    <div class="col-md-8">
                        {{ form_widget(form.libelle,{'attr':{'class':'form-control'}}) }}
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label">Description</label>
                    <div class="col-md-8">
                        {{ form_widget(form.description,{'attr':{'class':'form-control'}}) }}{{ form_widget(form)}}
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label">Mots Clés</label>
                    <div class="col-md-8">
                        <input type="text" id="mots_cles"   value="" />
                    </div>
                </div>
            </div>
            <div class="form-group form-actions">
                <div class="col-md-8 col-md-offset-4">
                    <button onclick="saveTheme()" class="btn btn-sm btn-primary" type="button">
                        <i class="fa fa-angle-right"></i>
                        Submit
                    </button>
                    <button class="btn btn-sm btn-warning" type="reset">
                        <i class="fa fa-repeat"></i>
                        Reset
                    </button>
                </div>
            </div>

        </form>
    </div>
</div>
</div>
{% endblock %}
    {% block js %}
    {{parent()}}
<script>
    motscles = []
</script>
<script src="/js/inputosaurus.js"></script>
<script>
    $('#mots_cles').inputosaurus({
        autoCompleteSource: function(request, response) {
            $.ajax({
                url: '{{path('admin_mot_cle_autocomplate')}}',
                dataType: "json",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    mot: request.term
                },
                success: function(data) {

                    response($.map(data.mots, function(item) {

                        return {
                            label: item.value,
                            value: item.value,
                            id: item.id
                        }
                    }

                    ));
                }
            });
        },
        activateFinalResult: true,
        change: function(ev) {
            $('#widget2_reflect').val(ev.target.value);
        }
    });
    function saveTheme() {
        $.ajax({
            type: 'post',
            url: '{{path('admin_theme_new')}}',
            data: $('#form-theme').serialize() + '&mots=' + JSON.stringify(motscles),
            success: function(data) {
                $('#page-content').html(data)
            }
        })
    }
</script>
    {% endblock %}